<template>
    <view class="bot-wrap">
        <view class="bot-top">
            
        </view>
        <view class="bot-main">
            <view class="bot-m-lef f28" :class="[!list.length&&'none']" @click="togglePop">
                <text>已选{{category}}类商品</text>
                <text class="ml15">共</text>
                <text class="f40 ml5 mr5">{{allTag}}</text> 件 
            </view>
            <view v-if="!!list.length" @click="goPay" class="bot-m-rig">选好了</view>
        </view>
		<uni-popup @change="change" ref="popupshop" :type="type" :animation="true" :durationAnim="250">
			<view class="popup-content" :style="{height:popHeight}">
				<view class="pop-top" id="pop-top">
                    <slot :list="list" name="header"/>
                </view>
				<scroll-view class="pop-scroll" scroll-y>
                    <view class="scroll-wrap" id="scroll-wrap">
					    <view v-for="(item, index) in list" :key="index">
						    <slot :item="item" name="popItem"/>
                        </view>
                    </view>
				</scroll-view>
			</view>
		</uni-popup>
    </view>
</template>

<script>
	export default {
        name:'productBottom',
		components: {
		},
        props:{
			list:{
				type: Array,
				default: ()=>[]
			},
			type: {
				type: String,
				default: 'bottom'
			},
			tagKey: {
				type: String,
				default: 'tag'
			},
        },
		data() {
			return {
                show: false,
                height: 200
			}
		},
		watch: {
			show: {
				handler: function(val) {
					wx.nextTick(()=>{
                        const state = !this.list.length ? false : val
						this.toggleAct(state)
					})
				},
				immediate: false
			},
            list: {
				handler: function(val) {
                    if(!val.length){
                        this.show = false
                        return
                    }
					wx.nextTick(()=>{
                        this.getHeight()
					})
				},
				immediate: true
			},
		},
		computed:{
            popHeight(){
                return this.height + 'px'
            },
            category(){
                return this.list.length
            },
            allTag(){
                return this.list.reduce((t,c)=>{
                    if(c[this.tagKey]){
                        t = t + c[this.tagKey]
                    }
                    return t
                },0)
            }
		},
		mounted(){
            this.$nextTick(function(){
                this.getHeight()
            })
		},
		methods: {
			goPay () {
				// 去支付
				uni.setStorageSync('pay-list', this.list)
				uni.navigateTo({
				    url: `/pages/pay/index`
				});
			},
            getHeight(){
                const query = uni.createSelectorQuery().in(this)
                query.selectAll('#pop-top, #scroll-wrap').boundingClientRect(data => {
                    if(data){
                        this.height = data.reduce((t,c)=>{
                            return t + c.height
                        },0)
                    }
                }).exec();
            },
            togglePop(){
                if(!this.list.length) return
                this.show = !this.show
            },
			toggleAct(show) {
				const action = !show ? 'close' : 'open'
				this.$refs.popupshop[action]()
                show&&this.$nextTick(function(){
                    this.getHeight()
                })
			},
			change(e){
                this.show = e.show
			}
		}
	}
</script>

<style lang="scss" scoped>
    $btn-w-size: 60%;
    $btn-h-size: 4rpx;
    $btn-bg-color: #ffbd86;
    $btn-color: #212121;
    .bot{
        &-wrap{
            position: relative;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            border: 0;
            z-index: 200;
        }
        &-main{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 90rpx;
            padding: 0 20rpx;
            padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
            padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
            box-sizing: initial;
            position: relative;
            z-index: 200;
            background-color: rgba($color: #fff, $alpha: .6);
        }
        &-m-lef{
            flex: 1;
            height: 100%;
            line-height: 90rpx;
            padding: 0 40rpx;
            border-radius: 90rpx 0 0 90rpx;
            background-color: rgba($color: #222, $alpha: 1.0);
            color: #fff;
            &.none{
                border-radius: 90rpx 90rpx;
            }
        }
        &-m-rig{
            color: $btn-color;
            height: 100%;
            line-height: 90rpx;
            border-radius: 0 90rpx 90rpx 0;
            padding: 0 40rpx;
            font-size: 28rpx;
            background: linear-gradient(90deg, #FFA459, #F07F23);
        }
    }
    .popup-content{
        background-color: rgba($color: #fff, $alpha: 1.0);
        max-height: calc(80vh);
        min-height: calc(30vh);
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 20rpx 20rpx 0 0;
        overflow: hidden;
    }
    .pop{
        &-top{
            padding-bottom: 30rpx;
        }
        &-scroll{
            width: 100%;
            box-sizing: border-box;
            height: 100%;
            flex: 1;
            overflow: hidden;
        }
        
    }
    .scroll-wrap{
        padding-bottom: calc(130rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
    }
</style>
